<template>
    <div class="index">
        <div class="index-top">
            <el-form :inline="true">
                <el-form-item class="btnRight">
                    <el-button type="primary" size="small" icon="el-icon-edit-outline" @click='onAddMoney()'>添加
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="list" border style="width: 100%">
            <el-table-column label="商品名称" align="center" prpo="name"></el-table-column>
            <el-table-column label="商品类型" align="center" prpo="type"></el-table-column>
            <el-table-column label="价格" align="center" prpo="price"></el-table-column>
            <el-table-column label="封面" align="center" prpo="cover"></el-table-column>
            <el-table-column label="创建时间" align="center" prpo="type"></el-table-column>
            <el-table-column label="创建人" align="center" prpo="type"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

export default {
    name: "Index",
    data() {
        return {
            list: [], //数据存储
        };
    },
    methods: {
        userInfo() {
            this.$axios.get("/api/good").then(res => {
                // console.log(res)
                this.userData = res.data;
            }).catch(err => console.log(err));
        },
        handleEdit(index, row) {
            console.log(row)
            //编辑
            this.dialong = {
                title: "编辑信息",
                show: true,
                option: "edit"
            }
            this.form = {
                name: row.name,
                sex: row.sex,
                state: row.state,
                hobby: row.hobby,
                marriage: row.marriage,
                birthday: row.birthday,
                address: row.address,
                id: row._id
            }
        },
        handleDelete(index, row) {
            //删除数据
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$axios.delete(`/api/good/delete/${row._id}`).then(res => {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
                    this.userInfo();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        onAddMoney() {
            //添加内容
            this.dialong = {
                title: "添加信息",
                show: true,
                option: "add"
            }
            this.form = {
                name: "",
                sex: "",
                state: "",
                hobby: "",
                marriage: "",
                birthday: "",
                address: ""
            }
        }
    },
    created() {
        this.userInfo();
    },
    components: {
        UserDialong
    }
};
</script>
<style scoped>
    .index {
        margin: 10px;
    }

    .btnRight {
        float: right;
    }
</style>
